<template>
  <div class="topic" :class="act ? 'act' : 'act-no'">
    <div>
      <el-tag class="biao">问答题</el-tag>
    </div>
    <div class="del" @click="remove" v-if="isremove">
      <i class="el-icon-delete"></i>
    </div>

    <div class="title">
      <h2>{{ idx + 1 }}</h2>
      <inputTi
        :isTitle="true"
        :idx="idx"
        :inputVal="question.title"
        :placeholder="question.questionTypeName"
        :fileList="question.titimgs"
        @changeImg="titimgChange"
        @input="titleChange"
      ></inputTi>
    </div>
    <div class="content">
      <template v-for="(op, i) in question.options">
        <div
          :key="i"
          :style="`display: ${
            act ? 'flex' : 'block'
          }; justify-content:space-between; align-items: center;`"
        >
          <answersKeywords
            :idx="i"
            :obj="op"
            :keywordDelimeter="keywordDelimeter"
            @input="keywordChange"
          ></answersKeywords>
          <i
            @click="close(i)"
            style="cursor: pointer; margin-left: 30px; flex: 1; font-size: 15px"
            class="el-icon-close"
            v-if="act"
          ></i>
        </div>
      </template>
    </div>
    <div class="bonttom" v-if="act">
      <el-link type="primary" @click="add">
        <i class="el-icon-plus"></i> 判分关键词
      </el-link>
      <!-- 系统自动批阅时的判分关键词，答案匹配到关键词后按得分比例给分 -->
      <!-- <el-link type="primary"><i class="el-icon-edit"></i> 批量编辑选项</el-link> -->
    </div>
  </div>
</template>

<script>
import inputTi from "./inputTi";
import answersKeywords from "./answersKeywords";

export default {
  components: {
    inputTi,
    answersKeywords,
  },

  props: {
    item: {
      type: Object,
      default: () => {},
    },
    act: {
      type: Boolean,
    },
    idx: {
      type: Number,
    },
    isremove: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      keywordDelimeter: "$",
      question: this.item,
      optionObj: {
        keywords: "",
        num: 1,
      },
    };
  },

  computed: {},
  watch: {
    item() {
      this.question = this.item;
    },
    act(val) {},
    idx() {},
  },
  created() {
    console.log("answers", this.question);
  },
  mounted() {},
  methods: {
    //题目 变更
    titleChange(v) {
      this.question.title = v;
      this.upParentQuestion();
    },
    titimgChange(fileList) {
      this.question.titimgs = fileList;
      this.upParentQuestion();
    },
    //选项 变更
    keywordChange(i, v) {
      this.question.options[i] = JSON.stringify(v);
      this.upParentQuestion();
    },
    // 变更父组件对象
    upParentQuestion() {
      this.$emit("change", this.idx, this.question);
      this.$forceUpdate();
    },
    // 添加选项
    add() {
      this.question.options.push(JSON.stringify(this.optionObj));
    },
    // 删除选项
    close(index) {
      this.question.options.splice(index, 1);
    },
    // 移除试题
    remove() {
      this.$emit("remove", this.idx);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  h2 {
    width: 50px;
    line-height: 30px;
    text-align: center;
  }

  width: 437px;
  // width: 70%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  // flex-wrap: wrap;
}

.biao {
  position: absolute;
  top: 20px;
  right: 120px;
}

.act-no {
  border: 1px solid #f0f0f0 !important;
}

.act {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2) !important;
  // padding: 20px 0 17px;
  border-left: 3px solid #3089dc !important;
}

.topic {
  // height: 200px;
  position: relative;
  transition: 0.1s all;
  padding: 20px;

  .del {
    position: absolute;
    top: 30px;
    right: 40px;
    display: none;
    font-size: 20px;
    cursor: pointer;
  }
}

.topic:hover {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);

  .del {
    display: block;
  }
}

.content {
  width: 82%;
  // margin-top: 20px;
  margin-left: 40px;

  .contentItem {
    margin-top: 20px;
    width: 100%;
    display: flex;

    // justify-content: space-between;
    align-items: center;
    // .input{
    //   width: 90%;

    // }
    .box {
      width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    i {
      // margin-left: 30px;
      // float: right;
      font-size: 18px;
      display: inline-block;
      color: #666;
    }
  }
}

.input {
  width: 427px;
}

.bonttom {
  height: 40px;
  margin-top: 10px;
  margin-left: 40px;
  width: 35%;
  display: flex;
  justify-content: space-between;
}
</style>
